<template>
	<view class="content">
		<view class="header">
			<!-- 状态栏 -->
			<view class="statusBar" :style="{'height':`${statusBarH}px`}"></view>
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-img">
					<view style="width: 124rpx;height: 124rpx;border-radius: 62rpx;overflow: hidden;">
						<image :src="userInfo.avatar || '../../static/avatar.png'" style="width: 124rpx;height: 124rpx;" mode="aspectFill"></image>
					</view>	
				</view>
				<view class="right">
					<view class="name">
						{{userInfo.username || '未登录'}}
					</view>	
					<!-- <view class="tip">
						{{userInfo.kefu_mobile || ''}}
					</view> -->
				</view>
			</view>
			<!-- 收藏、订单 -->
			<view class="group">
				<navigator url="/pages/collect/collect" hover-class="none" style="flex: 1;">
					<view class="group-item">
						<image src="../../static/star.png" style="width: 62rpx;height: 60rpx;
						margin-bottom: 18rpx;" mode=""></image>
						<text>收藏</text>
					</view>
				</navigator>
				<view class="gap"></view>
				<navigator url="/pages/order/order" hover-class="none" style="flex: 1;">
					<view class="group-item">
						<image src="../../static/order.png" style="width: 48rpx;height: 60rpx;
						margin-bottom: 18rpx;" mode=""></image>
						<text>我的订单</text>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 联系我们 -->
		<view class="cell" @click="show = true">
			<image src="../../static/call.png" style="width: 36rpx;height: 36rpx;margin-right: 20rpx;" mode=""></image>
			<text>联系我们</text>
			<view class="right">
				<u-icon name="arrow-right" size="22" color="#7E7E7E"></u-icon>
			</view>	
		</view>
		<!-- 关于我们 -->
		<navigator url="/pages/about/about" hover-class="none">
			<view class="cell">
				<image src="../../static/about.png" style="width: 36rpx;height: 36rpx;margin-right: 20rpx;" mode=""></image>
				<text>关于我们</text>
				<view class="right">
					<u-icon name="arrow-right" size="22" color="#7E7E7E"></u-icon>
				</view>	
			</view>
		</navigator>
		<view class="logout-btn" @click="logout">
			退出登录
		</view>
		<!-- 联系客服 -->
		<u-popup :show="show" :round="10" mode="center" @close="show = false">
			<view class="modal-box">
				<view class="modal-title">
					客服电话
				</view>
				<view class="phone">
					{{userInfo.kefu_mobile}}
				</view>
				<view class="call-btn" @click="call()">
					拨打电话
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarH:uni.getSystemInfoSync().statusBarHeight,
				show:false,
				userInfo:{}
			}
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				uni.$u.toast('未登录，请登录')
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				},1500)
				return
			}
			this.getUserInfo()
		},
		methods: {
			// 退出登录
			logout(){
				uni.removeStorageSync('token')
				this.$u.toast('已退出')
				setTimeout(()=>{
					uni.reLaunch({
						url:'/pages/index/index'
					})
				},1000)
			},
			// 获取个人信息
			getUserInfo(){
				uni.$u.http.post('/shop/userinfo', ).then(res => {
					this.userInfo = res.data
				})
			},
			call(){
				uni.makePhoneCall({
					phoneNumber:this.userInfo.kefu_mobile
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.statusBar{
	width: 750rpx;
}
.header{
	width: 750rpx;
	min-height: 400rpx;
	padding-bottom: 24rpx;
	background: linear-gradient(136deg, #FFECCA 0%, #E7BC70 100%);
}
.user-info{
	display: flex;
	align-items: center;
	padding: 0rpx 56rpx;
	margin-top: 36rpx;
	.user-img{
		width: 156rpx;
		height: 156rpx;
		background: rgba(255, 255, 255, 0.42);
		border-radius: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.right{
		margin-left: 30rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: #0E0E0E;
		.tip{
			font-size: 30rpx;
			font-weight: 400;
		}
	}
}
.group{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25rpx;
	.group-item{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #3D3D3D;
	}
	.gap{
		height: 108rpx;
		border-left: 1rpx solid rgba(43, 43, 43, 0.44);
	}
}
.cell{
	width: 690rpx;
	height: 108rpx;
	display: flex;
	align-items: center;
	font-size: 34rpx;
	font-weight: bold;
	border-bottom: 1rpx solid rgba(151, 151, 151, 0.2);
	color: #666666;
	padding: 0rpx 32rpx 0rpx 28rpx;
	.right{
		margin-left: auto;
	}
}
.logout-btn{
	width: 609rpx;
	height: 88rpx;
	background: linear-gradient(90deg, #FAD6AC 0%, #F3BA7E 100%);
	box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(220, 168, 109, 0.45);
	border-radius: 26rpx;
	text-align: center;
	line-height: 88rpx;
	font-size: 34rpx;
	font-weight: bold;
	color: #666666;
	margin-top: 400rpx;
}
.modal-box{
	width: 640rpx;
	height: 398rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.modal-title{
		font-size: 48rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 38rpx;
	}
	.phone{
		font-size: 48rpx;
		font-weight: bold;
		color: #666666;
		margin-top: 52rpx;
	}
	.call-btn{
		width: 342rpx;
		height: 72rpx;
		background: #8EB7FF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(220, 168, 109, 0.45);
		border-radius: 26rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
		margin-top: 70rpx;
	}
}
</style>
